<template>
  <div>
    <!-- 表格显示 -->
    <el-table :data="ports" style="width: 100%">
      <el-table-column prop="portName" label="港口名称"></el-table-column>
      <el-table-column prop="location" label="位置"></el-table-column>
      <el-table-column prop="storageFeeRate" label="堆存费率（元/吨/天）"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增港口按钮 -->
    <el-button type="primary" @click="showAddDialog">新增港口</el-button>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="港口信息">
      <el-form :model="portForm">
        <el-form-item label="港口名称">
          <el-input v-model="portForm.portName"></el-input>
        </el-form-item>
        <el-form-item label="位置">
          <el-input v-model="portForm.location"></el-input>
        </el-form-item>
        <el-form-item label="堆存费率（元/吨/天）">
          <el-input v-model="portForm.storageFeeRate" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">{{ isEditing ? '保存' : '添加' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      ports: [], // 港口列表数据
      dialogVisible: false, // 对话框显示状态
      isEditing: false, // 当前操作是否为编辑
      portForm: {
        portId: null,
        portName: '',
        location: '',
        storageFeeRate: null
      }
    };
  },
  mounted() {
    // 在组件挂载时调用获取港口列表的API
    this.fetchPorts();
  },
  methods: {
    // 获取港口列表
    fetchPorts() {
      axios.get('http://localhost:8080/port/list')
          .then(response => {
            if (response.data.code === 200) {
              this.ports = response.data.data; // 假设你的API响应包含code和data字段
            } else {
              this.$message.error('获取港口列表失败');
            }
          })
          .catch(error => {
            console.error(error);
            this.$message.error('获取港口列表出错');
          });
    },
    // 编辑港口信息
    handleEdit(port) {
      this.isEditing = true;
      this.dialogVisible = true;
      this.portForm = { ...port };
    },
    // 显示新增港口对话框
    showAddDialog() {
      this.isEditing = false;
      this.dialogVisible = true;
      this.resetForm();
    },
    // 删除港口
    handleDelete(port) {
      axios.delete(`http://localhost:8080/port/delete/${port.portId}`)
          .then(response => {
            if (response.data.code === 200) {
              this.$message.success('删除成功');
              this.fetchPorts(); // 重新获取港口列表
            } else {
              this.$message.error('删除失败');
            }
          })
          .catch(error => {
            console.error(error);
            this.$message.error('删除出错(请检查是否有货代公司依赖）');
          });
    },
    // 提交表单
    handleSubmit() {
      if (this.isEditing) {
        axios.put('http://localhost:8080/port/update', this.portForm)
            .then(response => {
              if (response.data.code === 200) {
                this.$message.success('更新成功');
                this.fetchPorts(); // 重新获取港口列表
                this.dialogVisible = false;
                this.resetForm();
              } else {
                this.$message.error('更新失败');
              }
            })
            .catch(error => {
              console.error(error);
              this.$message.error('更新出错');
            });
      } else {
        axios.post('http://localhost:8080/port/add', this.portForm)
            .then(response => {
              if (response.data.code === 200) {
                this.$message.success('新增成功');
                this.fetchPorts(); // 重新获取港口列表
                this.dialogVisible = false;
                this.resetForm();
              } else {
                this.$message.error('新增失败');
              }
            })
            .catch(error => {
              console.error(error);
              this.$message.error('新增出错');
            });
      }
    },
    // 重置表单
    resetForm() {
      this.portForm = {
        portId: null,
        portName: '',
        location: '',
        storageFeeRate: null
      };
    }
  }
};
</script>

<style scoped>
/* 可选：自定义样式 */
.el-dialog {
  /* 确保对话框在最前 */
  z-index: 9999 !important;
}
</style>
